<template>
  <div style="width: 100%; height: 500px">
    <div id="container"></div>
    <div id="panel"></div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const map = ref(null);

onMounted(() => {
  AMapLoader.load({
    key: "67399b84761c2d0aed556b4f7f1dd39f", // 高德地图API密钥
    version: "2.0", // 指定API版本
    plugins: ["AMap.PlaceSearch"], // 引入POI搜索插件
  })
    .then((AMap) => {
      map.value = new AMap.Map("container", {
        zoom: 16, // 设置地图缩放级别
        center: [116.397428, 39.90923], // 设置地图中心点坐标
      });

      const placeSearch = new AMap.PlaceSearch({
        map: map.value, // 指定搜索结果展示的地图
      });

      AMap.event.addListener(map.value, "click", (e) => {
        // 点击地图时进行POI搜索
        placeSearch.searchNearBy("餐厅", e.lnglat);
      });
    })
    .catch((e) => {
      console.error(e);
    });
});
</script>
<style scoped lang="less"></style>
